
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="__CSS__/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
	<link href="__CSS__/reset.css" rel="stylesheet">
	<link href="__CSS__/animate.min.css" rel="stylesheet">
	<link rel="stylesheet" href="__JS__/plugins/elementui/element-ui/lib/theme-chalk/index.css">
    {block name="style"}{/block}
	<style media="screen">
	.pace .pace-progress{
		height: 5px;
		background: #409EFF;
	}
	/* .socketMsg{
		background-color: #f0f9eb;
		border-color: #c2e7b0;
	}
	.socketMsg .el-notification__title{
		color:#67c23a;
	}
	.socketMsg p{
		color:#67c23a;
		font-weight: 400;
	}
	.socketMsg .el-notification__closeBtn.el-icon-close{
		color:#67c23a;
	} */
	/*进度条文字*/
	/* .pace .pace-progress:before {
		content: attr(data-progress-text);
		color:#a7b1c2;
		display: block;
		font-size: 10px;
		background: #2f4050;
	} */

	</style>
	<script src="__JS__/jquery.min.js?v=2.1.4"></script>
	<script src="__JS__/plugins/pace/pace.min.js"></script>
	<script src="__JS__/plugins/elementui/vue/vue.js"></script>
	<script src="__JS__/plugins/elementui/element-ui/lib/index.js"></script>
</head>
<body class="gray-bg">
<div id="main"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-background="rgba(0, 0, 0, 0.5)">
	<div class="wrapper wrapper-content animated fadeInRight">
		{block name="content"}{/block}
	</div>
</div>
{block name="component"}{/block}
<div id="uploadAlert">
	<el-dialog title="上传文件" :visible.sync="is_show" tool="15vh" :before-close="clearFilesList">
		<el-upload
			:action="action_url"
			list-type="picture-card"
			ref="upload" multiple="true"
			:on-preview="Preview"
			:on-success="Success"
			name="file" :data="upData"
			:limit="limit" :on-exceed="Exceed"
			:before-upload="beforeUpload">
			<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog title="预览" :visible.sync="showImgPreview" append-to-body>
		  	<img width="100%" :src="upfile.previewImgUrl">
		</el-dialog>
		<div slot="footer" class="dialog-footer">
			<el-button type="success" @click="clearFilesList">确定</el-button>
		</div>
	</el-dialog>
</div>
<div id="previewAlert">
	<el-dialog title="预览" :visible.sync="show" append-to-body top="10vh" width="450px">
		<img width="100%" :src="url">
	</el-dialog>
</div>
<script type="text/javascript">
var uploadAlert = new Vue({
	el:"#uploadAlert",
	data() {
		return {
			is_show:false,
			showImgPreview:false,
			limit:1,
			action_url:'{:url("Attachment/uploadAttach")}',
			upfile:{
				name:'{:session("id")}'+'_'+'{:date("YmdHis")}',
				previewImgUrl:'',
				ext:"{$Webset.ext|default=''}",
				sizeLimit:"{$Webset.max_size_of_upload|default=''}"
			},
			upData:{
				// targetpath:(string)
			}
		}
	},
	methods:{
		Success(res,file) {
			this.upfile.previewImgUrl = res.data.path + "?r=" + Math.random();
			main.upSuccess(res,file);
		},
		beforeUpload(file) {
			const isExt = this.upfile.ext.search(file.name.split('.')[file.name.split('.').length-1]) != -1;
			const isLtSize = file.size / 1024 / 1024 <= this.upfile.sizeLimit;
			if(!isExt){
				main.$notify.error({
					title:'错误',
					message:"上传文件的格式不被允许"
				});
			}
			if(!isLtSize){
				main.$notify.error({
					title:'错误',
					message:"上传文件大小超过限制,文件大小限制为" + this.upfile.sizeLimit
				});
			}
			return isExt && isLtSize;
		},
		Preview(file) {
			this.previewImgUrl = file.url;
        	this.showImgPreview = true;
		},
		Exceed() {
			main.$notify.error({
				title:'错误',
				message:"上传文件数量超过限制,限制数量为" + this.limit
			});
		},
		clearFilesList(){
			this.is_show = false;
			this.$refs.upload.clearFiles();
		}
	}
})
var previewAlert = new Vue({
	el:"#previewAlert",
	data() {
		return {
			show:false,
			url:''
		}
	}
})
$(function(){
	$('#main').css('height',window.innerHeight-40+"px");
})
</script>
{block name="script"}{/block}
</body>
</html>
